<template>
  <div id="minimap-container"
       class="minimap-container"
       ref="miniMapRef" @mouseleave="handleMouseLeave"></div>
  <div class="minimap-button" @mouseenter="handleMouseEnter">
    <el-icon><Stopwatch /></el-icon>
    <span style="margin-left: 5px">显示小地图</span>
  </div>
</template>

<script setup lang="ts">
import {Stopwatch} from "@element-plus/icons-vue";

const miniMapRef = ref<HTMLElement | null>(null)
let autoHideTimer:ReturnType<typeof setTimeout>

const autoHide = () => {
  clearTimeout(autoHideTimer)
  autoHideTimer = setTimeout(() => {
    hide()
  }, 2500)
}

const hide = () => {
  miniMapRef.value?.classList.add('hide')
  setTimeout(() => {
    miniMapRef.value?.classList.add('exactly-hide')
  }, 500)
}

const handleMouseEnter = () => {
  console.log('mouse enter', autoHideTimer)
  clearTimeout(autoHideTimer)
  show()
}

const show = () => {
  miniMapRef.value?.classList.remove('hide')
  miniMapRef.value?.classList.remove('exactly-hide')
}

const handleMouseLeave = () => {
  autoHide()
}

onMounted(() => {
  autoHide()
})

onBeforeUnmount(() => {
  clearTimeout(autoHideTimer)
})

</script>

<style scoped lang="scss">
#minimap-container {
  position: absolute;
  top: 85px;
  right: 25px;
  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
  width: 300px;
  height: 200px;
  z-index: 2;
}

.minimap-container {
  transition: all linear 500ms;
}

.minimap-button {
  position: absolute;
  top: 85px;
  right: 30px;
  z-index: 1;
  background: white;
  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 3px 10px;
  text-align: center;
  font-size: 12px;
}

.hide {
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

.exactly-hide {
  display: none;
}

</style>
